<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="7">
        <el-card>
          <div>
            <i class="el-icon-ali-fanhui my-icon" @click="backPage"></i>
          </div>
          <div class="avatar-div">
            <el-avatar class="avatar" :src="avatarFullPath"></el-avatar>
          </div>

          <div class="avatar-div">
            <div style="font-weight: bold; font-size: 20px">{{ userName }}</div>
          </div>

          <div>
            <div class="total-card-top">
              <div class="total-card-top-div">
                <div class="count-font">{{likeCount}}</div>
                <div class="text-font">获赞</div>
              </div>
              <div class="total-card-top-div">
                <div class="count-font">{{ answerList.length }}</div>
                <div class="text-font">回答</div>
              </div>
              <div class="total-card-top-div">
                <div class="count-font">{{ askList.length }}</div>
                <div class="text-font">提问</div>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="personal-nav">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 提问 -->
            <el-tab-pane label="提问" name="ask">
              <div style="height: 54vh; overflow-y: auto">
                <el-card
                  v-for="(ask, index) in askList"
                  :key="ask.articleid"
                  class="my-font"
                  style="margin-bottom: 10px"
                >
                  <h4
                    style="cursor: pointer"
                    @click="toAskDetail(ask.articleid)"
                  >
                    {{ ask.articletitle }}
                  </h4>
                  <div style="margin-left: 80%; margin-top: 10px">
                    {{ new Date(ask.createtime).toLocaleDateString("zh-CN") }}
                  </div>
                </el-card>
              </div>
            </el-tab-pane>
            <!-- 回答 -->
            <el-tab-pane label="回答" name="answer">
              <div style="height: 54vh; overflow-y: auto">
                <el-card
                  v-for="(answer, index) in answerList"
                  :key="answer.replyid"
                  class="my-font"
                  style="margin-bottom: 10px"
                  @click.native="toAskDetail(answer.articleid)"
                >
                  <div style="display: flex">
                    <div style="margin-right: 10px; font-weight: bold">我</div>
                    <div>回复</div>
                    <div style="margin-left: 10px; font-weight: bold">
                      {{ answer.username }}
                    </div>
                  </div>
                  <div style="margin-left: 15px; margin-top: 10px">
                    <div>{{ answer.replycontent }}</div>
                  </div>
                  <div style="margin-left: 80%; margin-top: 10px">
                    {{
                      new Date(answer.createtime).toLocaleDateString("zh-CN")
                    }}
                  </div>
                </el-card>
              </div>
            </el-tab-pane>
            <!-- 被回复 -->
            <el-tab-pane label="消息" name="receive">
              <div style="height: 54vh; overflow-y: auto">
                <el-card
                  v-for="(answer, index) in receivedList"
                  :key="answer.replyid"
                  class="my-font"
                  style="margin-bottom: 10px"
                  @click.native="toAskDetail(answer.articleid)"
                >
                  <div style="display: flex">
                    <div style="margin-right: 10px; font-weight: bold">
                      {{ answer.username }}
                    </div>
                    <div>回复</div>
                    <div style="margin-left: 10px; font-weight: bold">我</div>
                  </div>
                  <div style="margin-left: 15px; margin-top: 10px">
                    <div>{{ answer.replycontent }}</div>
                  </div>
                  <div style="margin-left: 80%; margin-top: 10px">
                    {{
                      new Date(answer.createtime).toLocaleDateString("zh-CN")
                    }}
                  </div>
                </el-card>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  async created() {
    this.userId = await localStorage.getItem("userId");
    //获取用户信息
    this.getUserInfoById();
    //获取用户提问列表
    this.getAskList();
    //获取回复列表
    this.getAnswerList();
    //获取接收消息列表
    this.getReceivedList();
    //获取文章点赞总数
    this.getArticleLikeCountById()
  },
  data() {
    return {
      userId: "", //用户id
      userName: "", //用户名
      avatar: "", //头像
      avatarFullPath: "", //头像路径
      activeName: "ask", //激活内容
      askList: [], //提问列表
      answerList: [], //回答列表
      receivedList: [], //接收消息列表,
      likeCount: 0, //文章点赞总数
    };
  },
  computed: {},
  methods: {
    //根据userId获取用户名和头像
    getUserInfoById() {
      this.$request.getHttp({
        url: "/user/getUserInfoById",
        params: {
          userId: this.userId,
        },
        success: (data) => {
          if (data.code == 200) {
            this.userName = data.user.username;
            this.avatar = data.user.avatar;
            this.avatarFullPath = `${this.$store.state.ipAddr}/${this.avatar}`;
          }
        },
        error: (error) => {},
      });
    },
    //获取提问列表
    getAskList() {
      this.$request.getHttp({
        url: "/article/getArticleListByUserId",
        params: { userId: this.userId },
        success: (data) => {
          this.askList = data.list;
          console.log(this.askList);
        },
        error: (error) => {},
      });
    },
    toAskDetail(artcleId) {
      // 跳转到该帖子的详情页面
      this.$router.push({
        name: "questiondetail", //必须使用路由名称
        params: { userId: this.userId, artcleId: artcleId },
      });
    },
    //获取回答列表
    getAnswerList() {
      this.$request.getHttp({
        url: "/reply/getReplyListByUserId",
        params: { userId: this.userId },
        success: (data) => {
          this.answerList = data.list ? data.list : [];
          console.log("answerList", this.answerList);
        },
        error: (error) => {},
      });
    },
    //获取接收者列表
    getReceivedList() {
      this.$request.getHttp({
        url: "/reply/getReplyListByUserId",
        params: { userId: this.userId, isReceiveId: true },
        success: (data) => {
          this.receivedList = data.list ? data.list : [];
          console.log("receivedList", this.receivedList);
        },
        error: (error) => {},
      });
    },
    //获取用户所有文章点赞数
    getArticleLikeCountById() {
      this.$request.getHttp({
        url: "/article/getArticleLikeCountById",
        params: {
          userId: this.userId,
        },
        success: (data) => {
          this.likeCount = data.likeCount;
        },
        error: (error) => {},
      });
    },
    //返回
    backPage() {
      this.$router.back();
    },
    //切换
    handleClick() {},
  },
};
</script>

<style scoped>
.my-icon {
  font-size: 30px;
  cursor: pointer;
  padding-left: 90%;
}

.avatar-div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.avatar {
  width: 100px;
  height: 100px;
}

.total-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
}
.total-card-top-div {
  width: 100px;
}
.count-font {
  font-size: 30px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #409eff;
}
.text-font {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.personal-nav {
  margin: 10px 0px 10px 0px;
  height: 600px;
}

.my-font {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}
</style>